<template>
	<view>
		<view class="page">
			<!-- 数据列表 -->
			<view class="padding-horizontal-main" style="padding-top: 20rpx;">
				<uni-swipe-action>
					<!-- 服务 -->
					<block v-if="service_list?.length > 0">
						<view v-for="(item, index) in service_list" :key="index"
							class="oh border-radius-main bg-white spacing-mb">
							<uni-swipe-action-item :right-options="swipe_options" @click="swipe_opt_event"
								@change="swipe_change($event, item, index)">
								<view style="padding: 20rpx; position: relative;" class="goods-item">
									<!-- 选择 -->
									<view @tap="selected_event" data-type="node" :data-index="index" :data-detail="item"
										class="fl selected">
										<image v-if="(item.is_error || 0) != 1" class="icon"
											:src="item?.selected ? '../../static/images/select-active-icon.png':'../../static/images/select-disabled-icon.png'"
											mode="widthFix"></image>
										<text v-if="(item.is_error || 0) == 1" class="cr-grey">失效</text>
									</view>

									<view class="items">
										<navigator hover-class="none">
											<!-- 图片 -->
											<image
												:class="'goods-image fl radius '+((item.is_error || 0) == 1 ? 'opacity' : '')"
												:src="item?.info?.siPict ? organizationGateway + '/file/download?filepath=' + item?.info?.siPict[0]?.path : ''"
												mode="aspectFill"></image>
										</navigator>

										<!-- 基础 -->
										<view class="goods-base">
											<!-- 标题、规格 -->
											<navigator hover-class="none">
												<view
													:class="'goods-title multi-text '+((item.is_error || 0) == 1 ? 'cr-grey' : '')">
													{{item?.info?.siName}}
												</view>
											</navigator>
											<view style="margin-bottom: 5rpx;">
												<text
													class="cr-gray">{{item?.info?.siUnsu + "/" + item?.info?.siUnit}}</text>
											</view>

											<!-- 底部内容 -->
											<view class="goods-bottom" style="position: relative;margin-top: 10rpx;">
												<!-- 价格 -->
												<text class="sales-price">{{"￥" + numberFormat(item?.ocPric, 2)}}</text>

												<!-- 数量 -->
												<view v-if="(item.is_error || 0) != 1"
													class="number-content oh round br"
													style="position: absolute; text-align: center;">
													<view @tap="goods_buy_number_event"
														class="number-submit cr-gray fl va-m"
														style="text-align: center;" :data-index="index" data-type="0"
														data-attr="service">-
													</view>
													<input @blur="goods_buy_number_blur" class="cr-gray fl va-m"
														style="text-align: center; background-color: #fff; border-radius: 0"
														type="number" :value="item?.count" :data-index="index"
														data-attr="service">
													<view @tap="goods_buy_number_event"
														class="number-submit cr-gray fl va-m"
														style="text-align: center;" :data-index="index" data-type="1"
														data-attr="service">+
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</uni-swipe-action-item>
						</view>
					</block>

					<!-- 商品 -->
					<block v-if="commodity_list.length > 0">
						<view v-for="(item, index) in commodity_list" :key="index"
							class="oh border-radius-main bg-white spacing-mb">
							<uni-swipe-action-item :right-options="swipe_options" @click="swipe_opt_event"
								@change="swipe_change($event, item, index)">
								<view style="padding: 20rpx; position: relative;" class="goods-item">
									<!-- 选择 -->
									<view @tap="selected_event" data-type="node" :data-index="index" :data-detail="item"
										class="fl selected">
										<image v-if="(item.is_error || 0) != 1" class="icon"
											:src="item?.selected ? '../../static/images/select-active-icon.png':'../../static/images/select-disabled-icon.png'"
											mode="widthFix"></image>
										<text v-if="(item.is_error || 0) == 1" class="cr-grey">失效</text>
									</view>

									<view class="items">
										<navigator hover-class="none">
											<!-- 图片 -->
											<image
												:class="'goods-image fl radius '+((item.is_error || 0) == 1 ? 'opacity' : '')"
												:src="item?.info?.ciPict ? organizationGateway + '/file/download?filepath=' + item?.info?.ciPict[0]?.path : ''"
												mode="aspectFill"></image>
										</navigator>

										<!-- 基础 -->
										<view class="goods-base">
											<!-- 标题、规格 -->
											<navigator hover-class="none">
												<view
													:class="'goods-title multi-text '+((item.is_error || 0) == 1 ? 'cr-grey' : '')">
													{{item?.info?.ciName}}
												</view>
											</navigator>
											<view style="margin-bottom: 5rpx;">
												<text class="cr-gray">{{item?.info?.ciAlna}}</text>
											</view>

											<!-- 底部内容 -->
											<view class="goods-bottom" style="position: relative;margin-top: 10rpx;">
												<!-- 价格 -->
												<text class="sales-price">{{"￥" + numberFormat(item?.ocPric, 2)}}</text>

												<!-- 数量 -->
												<view v-if="(item.is_error || 0) != 1"
													class="number-content oh round br"
													style="position: absolute; text-align: center;">
													<view @tap="goods_buy_number_event"
														class="number-submit cr-gray fl va-m"
														style="text-align: center;" :data-index="index" data-type="0"
														data-attr="commodity">-
													</view>
													<input @blur="goods_buy_number_blur" class="cr-gray fl va-m"
														style="text-align: center; background-color: #fff; border-radius: 0"
														type="number" :value="item?.count" :data-index="index"
														data-attr="commodity">
													<view @tap="goods_buy_number_event"
														class="number-submit cr-gray fl va-m"
														style="text-align: center;" :data-index="index" data-type="1"
														data-attr="commodity">+
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</uni-swipe-action-item>
						</view>
					</block>
				</uni-swipe-action>
			</view>

			<!-- 操作导航 -->
			<view class="buy-nav oh wh-auto">
				<view class="br-t bg-white wh-auto ht-auto">
					<view class="nav-base fl single-text">
						<view @tap="selected_event" data-type="all" class="fl selected">
							<image class="icon va-m"
								:src="is_selected_all ? '../../static/images/select-active-icon.png':'../../static/images/select-disabled-icon.png'"
								mode="widthFix"></image>
							<text class="va-m cr-base">全选</text>
						</view>
						<view class="fr price">
							<view class="sales-price single-text fr">{{"￥" + numberFormat(total_price, 2)}}</view>
							<view class="fr">合计：</view>
						</view>
					</view>
					<view class="fr nav-submit padding-top padding-bottom padding-horizontal-main">
						<button class="bg-main cr-white round text-size-lg" type="default" @tap="buy_submit_event"
							:disabled="total_price == 0" hover-class="none">结算</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 空购物车 -->
		<view v-if="service_list?.length == 0 && commodity_list?.length == 0" class="no-data-box"
			style="text-align: center;">
			<image src="../../static/images/cart-empty.png" mode="widthFix" style="margin-bottom: 20rpx;"></image>
			<view style="color: #9A9A9A;font-size: 26rpx;">{{'购物车空空如也'}}</view>
			<navigator url="/pages/home/index" style="display: inline-block;" open-type="switchTab" hover-class="none">
				<button style="color: #fff; margin-top: 30rpx;" class="br-main bg-main round" type="default" size="mini"
					hover-class="none">去逛逛</button>
			</navigator>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		getCaregoryService,
		getCaregoryCommodity
	} from "../../utils/api.js";
	export default {
		data() {
			return {
				swipe_options: [{
					text: '收藏',
					style: {
						backgroundColor: '#1AAD19'
					}
				}, {
					text: '删除',
					style: {
						backgroundColor: '#E64340'
					}
				}],
				commodity_list: [],
				service_list: [],
				swipe_commodity_index: null,
				swipe_service_index: null,
				is_selected_all: false,
				total_price: 0
			}
		},
		computed: {
			...mapGetters({
				organizationGateway: "globalInfo/organizationGateway",
				orUuid: "dailyInfo/orUuid",
				cartInfo: "dailyInfo/cartInfo",
			}),
		},
		onLoad(params) {
			// if (this.orUuid && this.cartInfo?.length>0) this.loadCart(this.orUuid, this.cartInfo);
		},

		watch: {
			cartInfo: {
				handler(newValue, oldValue) {
					if (this.orUuid && newValue) this.loadCart(this.orUuid, newValue);
				},
				immediate: true,
				deep: true,
			},
		},
		methods: {
			async loadCart(orUuid, cartInfo) {
				if (cartInfo?.length > 0) {
					let service_list = [],
						commodity_list = [];
					for (let i = 0; i < cartInfo.length; i++) {
						let item = cartInfo[i]
						if (item.siUuid) {
							let res = await getCaregoryService({
								orUuid,
								siUuid: item.siUuid
							});
							if (res) {
								res.count = item.count
								// 判断是否失效
								res.is_error = 0
								// 该物品默认选中
								res.selected = item.selected
								service_list.push(res)
							}
						}
						if (item.ciUuid) {
							let res = await getCaregoryCommodity({
								orUuid,
								ciUuid: item.ciUuid
							});
							if (res) {
								res.count = item.count
								// 判断是否失效
								res.is_error = 0
								// 该物品默认选中
								res.selected = item.selected
								commodity_list.push(res)
							}
						}
					}
					this.service_list = service_list
					this.commodity_list = commodity_list
					// 选择处理
					this.selected_calculate();
				}
			},
			swipe_opt_event(e) {
				let index = e.index || 0;
				var temp_service_list = this.service_list;
				var temp_commodity_list = this.commodity_list;

				if (this.swipe_commodity_index === null && this.swipe_service_index === null) {
					uni.showToast({
						title: "请先滑动要操作的数据",
						icon: "error",
					});
					return false;
				}
				// if ((temp_service_list[this.swipe_item_index] || null) == null) {
				// 	uni.showToast({
				// 		title: "数据不存在",
				// 		icon: "error",
				// 	});
				// 	return false;
				// }

				// 根据操作类型处理数据
				if (index == 0) {
					//收藏
					console.log(1111111)
				} else {
					let cartInfo = this.cartInfo
					if (this.swipe_service_index != null) {
						let detSiUuid = temp_service_list[this.swipe_service_index]?.siUuid || null
						cartInfo = cartInfo.filter(item => item?.siUuid != detSiUuid)
						this.service_list = this.service_list.filter(item => item?.siUuid != detSiUuid)
					}
					if (this.swipe_commodity_index != null) {
						let detCiUuid = temp_commodity_list[this.swipe_commodity_index]?.ciUuid || null
						cartInfo = cartInfo.filter(item => item?.ciUuid != detCiUuid)
						this.commodity_list = this.commodity_list.filter(item => item?.ciUuid != detCiUuid)
					}
					this.$store.dispatch("dailyInfo/save_cart", {
						cartInfo,
					});
				}
			},
			// 右划事件
			swipe_change(e, i, v) {
				if (i?.siUuid) {
					this.swipe_service_index = (e == 'none') ? null : v;
				}
				if (i?.ciUuid) {
					this.swipe_commodity_index = (e == 'none') ? null : v;
				}
			},

			// 选中处理
			selected_event(e) {
				let type = e.currentTarget.dataset.type || null;
				let item = e.currentTarget.dataset.detail || null;

				if (type != null) {
					let temp_service_list = this.service_list;
					let temp_commodity_list = this.commodity_list;
					let temp_is_selected_all = this.is_selected_all;
					let cartInfo = this.cartInfo
					switch (type) {
						// 批量操作
						case 'all':
							temp_is_selected_all = temp_is_selected_all === true ? false : true;

							for (var i in cartInfo) {
								if (cartInfo[i]['is_error'] != 1) {
									cartInfo[i]['selected'] = temp_is_selected_all;
								}
							}

							// if (temp_service_list.length > 0) {
							// 	for (var i in temp_service_list) {
							// 		if (temp_service_list[i]['is_error'] != 1) {
							// 			temp_service_list[i]['selected'] = temp_is_selected_all;
							// 		}
							// 	}
							// }
							// if (temp_commodity_list.length > 0) {
							// 	for (var i in temp_commodity_list) {
							// 		if (temp_commodity_list[i]['is_error'] != 1) {
							// 			temp_commodity_list[i]['selected'] = temp_is_selected_all;
							// 		}
							// 	}
							// }
							break;
							// 节点操作
						case 'node':
							let index = e.currentTarget.dataset.index || 0;

							cartInfo.forEach(_item => {
								if (item?.siUuid && _item.siUuid === temp_service_list[index].siUuid) {
									_item.selected = temp_service_list[index]['selected'] == false ?
										true : false;
								}
								if (item?.ciUuid && _item.ciUuid === temp_commodity_list[index].ciUuid) {
									_item.selected = temp_commodity_list[index]['selected'] == false ?
										true : false;
								}
							})

							// if (item?.siUuid) {
							// 	temp_service_list[index]['selected'] = temp_service_list[index]['selected'] == false ?
							// 		true : false;
							// }
							// if (item?.ciUuid) {
							// 	temp_commodity_list[index]['selected'] = temp_commodity_list[index]['selected'] == false ?
							// 		true : false;
							// }
							break;
					}
					this.is_selected_all = temp_is_selected_all
					// this.commodity_list = temp_commodity_list
					// this.service_list = temp_service_list
					this.$store.dispatch("dailyInfo/save_cart", {
						cartInfo,
					});
					// 选择处理
					this.selected_calculate();
				}
			},
			// 价格计算
			selected_calculate() {
				let total_price = 0;
				let temp_service_list = this.service_list;
				let temp_commodity_list = this.commodity_list;
				if (temp_service_list?.length > 0) {
					for (var i in temp_service_list) {
						if ((temp_service_list[i]['selected'] || false) == true) {
							total_price += temp_service_list[i]['count'] * temp_service_list[i]['ocPric'];
						}
					}
				}
				if (temp_commodity_list?.length > 0) {
					for (var i in temp_commodity_list) {
						if ((temp_commodity_list[i]['selected'] || false) == true) {
							total_price += temp_commodity_list[i]['count'] * temp_commodity_list[i]['ocPric'];
						}
					}
				}
				this.total_price = total_price
			},

			// 数量输入事件
			goods_buy_number_blur(e) {
				let index = e.currentTarget.dataset.index || 0;
				let attr = e.currentTarget.dataset.attr || null;

				if (e.detail.value > 0) {
					//后期判断限购、库存
					let buy_number = parseInt(e.detail.value) || 1;
					let cartInfo = this.cartInfo
					cartInfo.forEach(item => {
						if (attr === "service" && item.siUuid === this.service_list[index].siUuid) {
							item.count = buy_number
							item.selected = this.service_list[index].selected
						}
						if (attr === "commodity" && item.ciUuid === this.commodity_list[index].ciUuid) {
							item.count = buy_number
							item.selected = this.commodity_list[index].selected
						}
					})
					this.$store.dispatch("dailyInfo/save_cart", {
						cartInfo,
					});
				} else {
					uni.showToast({
						title: "起购数量为1",
						icon: "error",
					});
				}
			},

			// 数量操作事件
			goods_buy_number_event(e) {
				let index = e.currentTarget.dataset.index || 0;
				let type = parseInt(e.currentTarget.dataset.type) || 0;
				let attr = e.currentTarget.dataset.attr || null;
				let buy_number = 0

				if (attr === "service") {
					let temp_service_number = parseInt(this.service_list[index]['count']);
					buy_number = (type == 0) ? temp_service_number - 1 : temp_service_number + 1;
				}
				if (attr === "commodity") {
					let temp_commodity_number = parseInt(this.commodity_list[index]['count']);
					buy_number = (type == 0) ? temp_commodity_number - 1 : temp_commodity_number + 1;
				}

				if (buy_number > 0) {
					let cartInfo = this.cartInfo
					cartInfo.forEach(item => {
						if (attr === "service" && item.siUuid === this.service_list[index].siUuid) {
							item.count = buy_number
							item.selected = this.service_list[index].selected
						}
						if (attr === "commodity" && item.ciUuid === this.commodity_list[index].ciUuid) {
							item.count = buy_number
							item.selected = this.commodity_list[index].selected
						}
					})
					this.$store.dispatch("dailyInfo/save_cart", {
						cartInfo,
					});
				}
			},
			// 结算
			buy_submit_event() {
				let data = {
					"buy_type": "cart",
				};
				if (this.cartInfo?.length > 0) {
					let info = []
					this.cartInfo.map(item => {
						if (item.selected === true) {
							info.push(item)
						}
					})
					if (info.length > 0) {
						data['info'] = info
						// 进入订单确认页面
						uni.navigateTo({
							url: '/pages/buy/buy?data=' + JSON.stringify(data)
						});
					} else {
						uni.showToast({
							title: "请选中后再结算",
							icon: "error",
						});
					}
				}

			}
		}
	}
</script>

<style>
	.page {
		padding-bottom: 100rpx;
	}

	.goods-title {
		line-height: 44rpx;
		min-height: 66rpx;
	}

	.goods-image {
		width: 155rpx;
		height: 155rpx;
		margin-right: 20rpx;
	}

	.goods-base {
		margin-left: 175rpx;
	}

	.goods-item .items {
		padding-left: 80rpx;
	}

	.goods-item .selected {
		margin-top: 60rpx;
	}

	/**
 * 错误提示
 */
	.goods-item .error-msg {
		left: 96rpx;
		top: 78rpx;
		width: 160rpx;
	}

	.goods-item .error-msg text {
		padding: 2rpx 10rpx;
		box-shadow: 0 2px 10px rgb(181 181 181 / 95%);
	}

	/**
 * 底部
 */
	.goods-item .goods-bottom {
		height: 58rpx;
	}


	/**
* 数量操作
*/
	.number-content {
		right: 0;
		top: 0;
	}

	.number-content .number-submit {
		width: 60rpx;
		font-weight: bold;
	}

	.number-content input {
		width: 30px;
		border-width: 0 1px;
		border-style: solid;
		border-color: #efefef;
	}

	.number-content .number-submit,
	.number-content input {
		padding: 0;
		height: 50rpx;
		line-height: 50rpx;
	}

	/*
* 展示型
*/
	.exhibition-mode button {
		line-height: 80rpx;
	}

	.exhibition-mode-data .items {
		padding-left: 0;
	}

	.exhibition-mode-data .error-msg {
		left: 26rpx;
	}


	/**
* 空购物车
*/
	.no-data-box {
		padding: 30% 0 0 0;
	}

	.no-data-box image {
		width: 160rpx;
	}

	/**
* 操作导航
*/
	.buy-nav {
		position: fixed;
		z-index: 2;
		left: 0;
		bottom: 0;
		/* #ifdef H5 || APP */
		bottom: var(--window-bottom);
		/* #endif */
	}

	.buy-nav,
	.nav-base {
		height: 100rpx;
		line-height: 100rpx;
	}

	.nav-submit button {
		height: 72rpx;
		line-height: 72rpx;
	}

	.nav-base {
		width: calc(75% - 20rpx);
	}

	.nav-submit {
		width: calc(25% - 40rpx);
	}

	.nav-submit button {
		border-radius: 0;
	}

	.selected .icon {
		width: 35rpx;
		height: 35rpx !important;
		margin: 0 10rpx;
	}

	.buy-nav .price {
		width: calc(100% - 140rpx);
	}

	.buy-nav .sales-price {
		max-width: calc(100% - 40px);
	}

	.nav-remove-submit {
		top: 38rpx;
		left: 66rpx;
		padding: 0rpx 20rpx;
		line-height: 36rpx;
	}
</style>
